.header {
  background: $header-background;
  //@include flexbox();
  //@include flex-direction(row);
  a {
    font-weight: map-get($base, font-weight);
    text-decoration: none !important;
    @include link-colors($header-text-color, $main-color-1);
  }
  .main {
    @include flexbox();
    @include media-breakpoint-down(md) {
      @include flex-direction(column);
    }
  }
}

.header-dark {
  @extend .text-dark;
  background: $header-background;
  .navbar_item-active {
    &::after {
      @include split-line(bottom, 4px, $text-color-theme-dark);
    }
  }
}

.header-light {
  @extend .text-light;
  background: rgba(#fff, 1.0);
  .navbar_item-active {
    &::after {
      @include split-line(bottom, 4px, $text-color-theme-light);
    }
  }
}

.header_logo {
  fill: $main-color-2;
}

.header_sidebar {
  margin: 0;
  padding: 0;
  width: map-get($layout, sidebar-width);
  height: get-header-title-height();
  @include media-breakpoint-down(md) {
    margin-left: 0;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 0px;
    padding: 0;
    width: 0px;
    height: get-header-title-height-md();
  }
  display: block;
  background: #888;
}

@include media-breakpoint-down(lg) {
  .header_sidebar {
    position: fixed;
    @include transform(translate(- map-get($layout, sidebar-width), 0));
  }

  .page_actions {
    display: block;
  }

  .show-sidebar {
    .page_actions {
      visibility: hidden;
    }
    .header_sidebar {
      @include transform(translate(0));
    }
    .page_mask {
      @include modal-show();
    }
  }
}

.header_title {
  @include menu(3, 0);
  @include align-items(center);
  @include flex-wrap(nowrap);
  @include flex(1);
  white-space: nowrap;
  margin-right: map-get($spacers, 3);
  height: get-header-title-height();
  @include media-breakpoint-down(md) {
    margin-left: 0;
    margin-top: 5px;
    margin-right: 0;
    margin-bottom: 0px;
    padding: 0;
    height: get-header-title-height-md();
  }
  & > .header_brand {
    @include flex(1);
  }
  & > .search-button {
    display: none;
    margin-left: map-get($spacers, 2);
    @include media-breakpoint-down(md) {
      @include flexbox();
    }
  }
}

.header_brand {
  @include flexbox();
  @include align-items(center);
  & > svg {
    width: map-get($base, header-logo-image-width);
    height: map-get($base, header-logo-image-height);
    margin-right: map-get($spacers, 3);
    vertical-align: middle;
    @include media-breakpoint-down(md) {
      width: map-get($base, header-logo-image-width) * 0.75;
      height: map-get($base, header-logo-image-height) * 0.75;
    }
  }
  & > a {
    display: inline-block;
    font-size: map-get($base, font-size-navbar-title);
    @include media-breakpoint-down(md) {
      font-size: map-get($base, font-size-navbar-title-small);
      margin-left: 0;
      margin-top: 3px;
      margin-right: 0;
      margin-bottom: 0px;
      padding: 0;
    }
  }
}

/* Added by shines77, 2019-01-28 */
.header-normal {
  position: absolute;
  top: 0px;
  left: 0px;
  margin-top: 0px;
  width: 100%;
  height: get-header-height();
  @include media-breakpoint-down(md) {
    height: get-header-height-md();
  }
  opacity: 1.0;
}

/* Added by shines77, 2019-01-28 */
.header-fixed {
  position: fixed !important;
  top: 0px;
  left: 0px;
  margin-top: 0px;
  width: 100%;
  height: get-header-height();
  @include media-breakpoint-down(lg) {
    height: get-header-height-md();
  }
  opacity: 1.0;
  z-index: map-get($z-indexes, header);
}

/* Added by shines77, 2019-01-28 */
.header-sticky {
  position: -webkit-sticky !important;
  position: -moz-sticky !important;
  position: -ms-sticky !important;
  position: -o-sticky !important;
  position: sticky !important;

  top: 0px;
  left: 0px;
  margin-top: 0px;
  width: 100%;
  height: get-header-height();
  @include media-breakpoint-down(lg) {
    height: get-header-height-md();
  }
  opacity: 1.0;
  z-index: map-get($z-indexes, header);
}

//
// See: https://blog.csdn.net/u012982629/article/details/81317896
//

/* Added by shines77, 2019-01-30 */
// Add a thin dividing line (0.5-1px) under the header div.
.header_dividing-line {
  position: relative;
  top: 0px;
  left: 0px;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid $diving-line-color;
  color: $diving-line-color;
  background: $diving-line-color;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(1.0);
  transform: scale(1.0);
}

/* Added by shines77, 2019-01-30 */
// Add a fixed position thin dividing line (0.5-1px) under the header div.
.header_dividing-line-fixed {
  position: fixed !important;
  top: 0px;
  left: 0px;
  margin-top: get-header-height();
  @include media-breakpoint-down(md) {
    margin-top: get-header-height-md();
  }
  width: 100%;
  height: 1px;
  border-bottom: 1px solid $diving-line-color;
  color: $diving-line-color;
  background: $diving-line-color;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(1.0);
  transform: scale(1.0);
  z-index: map-get($z-indexes, header-line);
}

.header_border {
  position: relative;
  border-radius: 5px;
}

.header_border:after {
  content: " ";
  width: 200%;
  height: 200%;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid $diving-line-color;
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-sizing: border-box;
  border-radius: 10px;
}

.navbar {
  @include overflow(auto, "x");
  margin-left: $navbar_left_offset;
  & > ul {
    margin: 0;
    padding-bottom: 0;
    @include media-breakpoint-down(md) {
      margin: -17px 0 0 0;
      padding-bottom: 4px 0 0 0;
    }
    @include navbar-menu(3, 2, 2, nowrap);
    @include align-items(center);
    height: get-navbar-height();
    @include media-breakpoint-down(md) {
      height: get-navbar-height-md();
    }
    .search-button {
      @include media-breakpoint-down(md) {
        display: none;
      }
    }
  }
}

.navbar_item {
  &::after {
    display: block;
    margin-bottom: -5px;
    content: "";
    @include split-line(bottom, 2px, transparent);
  }

  & > a {
    display: inline-block;
    font-size: map-get($base, font-size-navbar-text);
    @include media-breakpoint-down(md) {
      font-size: map-get($base, font-size-navbar-text-small);
    }
  }
}
.navbar_item-active {
  a {
    @include link-colors($main-color-1, $main-color-1);
  }
  &::after {
    @include split-line(bottom, 2px, $main-color-1);
  }
}

.navbar_icon {
  color: $main-color-2;
}

.navbar_vertical_divider {
  margin: 2px 8px 0px -8px;
  padding: 1px 1px 0px -1px;
  float: left;
  border: 1px;
  width: 1px;
  height: 25px;
  background: $main-color-2;
}